<template>
  <div class="box">
    <van-nav-bar title="影院" ref="navbar" @click-left='handLeft' @click-right='handRight'>
      <template #left>
        <span style="font-size:13px;margin-right:3px;color: #191a1b">{{cityName}}</span> <van-icon name="arrow-down" size='7' color='black' />
      </template>
      <template #right>
        <van-icon name="search" size="20" color='black'/>
      </template>
    </van-nav-bar>
    <div class="wrapper" :style="{ height: height }">
      <ul>
        <li v-for="data in cinemasList" :key="data.cinemaId" @click.stop='goFilm(data.cinemaId)'>
          <div class="left">
            <span>{{ data.name }}</span>
            <span>{{ data.address }}</span>
          </div>
          <div class="right">
            <span>
              <span class="txt">￥</span>{{ data.lowPrice / 100
              }}<span class="txt">起</span>
            </span>
            <span> 距离未知 </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import vant from 'vant'
import 'vant/lib/index.css'
import Vue from 'vue'
import { mapState, mapActions, mapMutations } from 'vuex'
Vue.use(vant)
export default {
  data () {
    return {
      height: null
    }
  },
  methods: {
    ...mapActions(['getCinemasData', 'getFilmList', 'getCinemasInfo']),
    ...mapMutations(['clearFilmList', 'clearCinemasInfo']),
    handLeft () {
      this.$router.push('/city')
    },
    handRight () {
      this.$router.push('/cinema')
    },
    goFilm (cinemaId) {
      this.$router.push(`/cinema/${cinemaId}`)
    }
  },
  computed: {
    ...mapState(['cityId', 'cinemasList', 'cityName', 'cinemaFilmList', 'cinemasInfo'])
  },
  mounted () {
    // 防止betterscroll点击失效
    const options = {
      click: true,
      tap: true
    }
    this.scroll = new BScroll('.wrapper', options)

    this.height =
      document.documentElement.clientHeight -
      this.$refs.navbar.$el.offsetHeight -
      document.querySelector('footer').offsetHeight +
      'px'

    if (this.cinemasList.length === 0) {
      this.getCinemasData(this.cityId).then(res => {
        // 使用betterScroll这里不能直接使用，因为数据是异步的，还没有上树，可以在执行分发函数的时候，将值返回
        // 因为执行的是一个axios对象，是一个promise数据，所以我们可以通过特性，将值返回回来然后.then()中执行初始化
        this.$nextTick(() => {
          new BScroll('.wrapper', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      this.$nextTick(() => {
        new BScroll('.wrapper', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
    /*
      以下内容被this.dispatch进行分发
      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=7710221`,
        headers: {
          'X-Host': 'mall.film-ticket.cinema.list'
        }
      }).then((res) => {
        this.cinemasList = res.data.data.cinemas
        this.$nextTick(() => {
          new BScroll('.wrapper', {
            scrollbar: {
              fade: true
            }
          })
        })
      }) */
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 49px);
  overflow: hidden;
  position: relative;
}
.box {
  width: 100%;
  background: white;
  ul {
    li {
      width: calc(100% - 30px);
      height: 45px;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          display: block;
          width: 17.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:first-child {
          font-size: 15px;
        }
        span:last-child {
          font-size: 12px;
          color: gray;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          text-align: center;
        }
        span:first-child {
          color: #ff5f16;
          font-size: 15px;
          .txt {
            font-size: 10px;
            color: #ff5f16;
          }
        }
        span:last-child {
          font-size: 11px;
          color: gray;
        }
      }
    }
  }
}
</style>
